<template>
  <div class="base-progress">
    <div class="inner" :style="{ width: w + '%' }">
      <span>{{ w }}%</span>
    </div>
    {{ a }}
  </div>
</template>

<script>
export default {
  // props: ['w'],
  // props: {
  //   w: Number,
  // },
  props: {
    w: {
      // type表示的是传的数据类型
      type: Number,
      // 表示的是 w这个属性 是否是必传。配置为true就必须要传
      required: true,
      // default:表示的是当父组件中不传值时，w的值就是default配置的值
      // default: 50,
      // required和default 不同时配置，因为必传的情况下肯定优质
      // validator:自定义校验，使用场景没有上边的多
      validator(val) {
        // val 就是传过来的值
        // console.log(val)
        if (val < 0 || val > 100) {
          return false
        } else {
          return true
        }
      },
    },
    a: {
      type: Number,
    },
    obj: {
      // 如果给复杂类型设置默认值 必须要写成一个函数
      // default: function () {
      //   return {}
      // },
      default: () => {},
    },
  },
}
</script>

<style scoped>
.base-progress {
  height: 26px;
  width: 400px;
  border-radius: 15px;
  background-color: #272425;
  border: 3px solid #272425;
  box-sizing: border-box;
  margin-bottom: 30px;
}
.inner {
  position: relative;
  background: #379bff;
  border-radius: 15px;
  height: 25px;
  box-sizing: border-box;
  left: -3px;
  top: -2px;
}
.inner span {
  position: absolute;
  right: 0;
  top: 26px;
}
</style>